<template>
  <div class="cart-wrapper">
    <div class="body">
      <template v-for="item in orderList" :key="item.id">
        <div class="item">
          {{ item }}
        </div>
      </template>
    </div>

    <div class="footer">
      <div class="left">
        <div class="price">￥{{ price }}</div>
      </div>

      <div class="right">
        <div class="coupon">
          <div>可用的优惠券</div>
          <a-select
            :style="{ width: '160px' }"
            placeholder="请选择"
            allow-clear
            v-model="activeCoupon"
            @change="handleChange"
          >
            <a-option
              v-for="(item, index) in couponList"
              :value="item.id"
              :disabled="item.minspend > basePrice"
              :label="item.couponname"
              :key="item.id"
            />
          </a-select>
        </div>

        <a-button type="primary" :disable="true" @click="handleSubmit">
          确认下单
        </a-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { commonRequest } from "@/utils/request";
import { onMounted, ref } from "vue";
import { Message } from "@arco-design/web-vue";
const userInfo = ref(null);
const orderList = ref([]);
const couponList = ref([]);
const price = ref(0);
const basePrice = ref(0);
const activeCoupon = ref(null);

const getData = async () => {
  console.log("userInfo", userInfo);
  if (userInfo.value?.id) {
    const res = await commonRequest.post(
      "/shoppingcart/select",
      `${userInfo.value.id}`
    );
    if (res.data.code === 200) {
      Message.success("获取成功");
      orderList.value = res.data.date;
      let base = 0;
      orderList.value.forEach((item) => {
        base += item.totalamount;
      });
      basePrice.value = base;
      price.value = basePrice.value;
    }
  }
};

const couponData = async () => {
  const res = await commonRequest.post(
    "/coupons/select",
    `${userInfo.value.id}`
  );

  if (res.data.code === 200) {
    couponList.value = res.data.date;
  }
};

const useCoupon = async () => {
  if (activeCoupon.value) {
    const res = await commonRequest.post(
      "/coupons/delete",
      `${activeCoupon.value}`
    );
  }
};

const handleSubmit = async () => {
  if (orderList.value?.length) {
    const res = await commonRequest.post(
      "/orders/update",
      orderList.value?.map((item) => {
        return `${item.id}`;
      })
    );

    if (res.data.code === 200) {
      useCoupon();
      getData();
      couponData();
      Message.success("支付成功");
      activeCoupon.value = null;
    }
  }
};

const getCouponById = (id) => {
  let res = null;
  couponList.value.forEach((item) => {
    if (item.id === id) {
      res = item;
    }
  });
  return res;
};

const handleChange = async (id) => {
  const item = getCouponById(id);
  if (item) {
    price.value = basePrice.value - item.discountvalue;
  }
};

onMounted(() => {
  const userInfoJSON = localStorage.getItem("userInfo");
  userInfo.value = JSON.parse(userInfoJSON);

  getData();
  couponData();
});
</script>

<style scoped>
.cart-wrapper {
  display: flex;
  flex-direction: column;
}
.body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 200px;
  max-height: 80vh;
  overflow-y: auto;
  margin-bottom: 10px;
}

.coupon {
  display: flex;
  align-items: center;
  gap: 4px;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.right {
  display: flex;
  gap: 16px;
}

.item {
  height: 100px;
  width: 100%;
  background-color: pink;
}
</style>
